<template>
  <view
    class="hb-w-full hb-overflow-hidden hb-box-shadow-base hb-rounded-xl"
    :style="{ backgroundColor: backgroundColor, padding: paddingComputed }"
  >
    <view class="hb-flex hb-justify-between hb-items-center">
      <slot name="header-left">
        <view class="hb-font-medium hb-text-sm">{{ title }}</view>
      </slot>
      <slot name="header-right"></slot>
    </view>
    <view
      class="hb-h-1rpx"
      :style="{ margin: dividerMarginComputed, backgroundColor: dividerColor }"
      v-if="showDivider"
    ></view>
    <view>
      <slot></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    backgroundColor: {
      type: String,
      default: '#FFF',
    },
    padding: {
      type: Array as PropType<number[]>,
      default: [24],
    },
    dividerMargin: {
      type: Array as PropType<number[]>,
      default: [24, 0],
    },
    showDivider: {
      type: Boolean,
      default: true,
    },

    dividerColor: {
      type: String,
      default: '#EBEDF0',
    },
  });
  const paddingComputed = computed(() => {
    return props.padding.join('rpx ') + 'rpx';
  });
  const dividerMarginComputed = computed(() => {
    return props.dividerMargin.join('rpx ') + 'rpx';
  });
</script>

<style lang="scss" scoped>
  /* 使用WindiCSS，无需额外样式 */
</style>
